<template>
  <div class="container">
    <Header></Header>
    <div class="main">
      <div class="main-content">
           <dl v-for="item in ImageList" :key="item.id" lazy>
        <dt>
          <img :src="item.coverImg" alt="" v-puzzle>
        </dt>
        <dd>
         <div>
           <p>{{ item.title }}</p>
           <p>作者:{{ item.author }}</p>
         </div>
        </dd>
        <div class="mask">
          <button @click="handerTemp(item.id)">使用给模版创建</button>
         </div> 
      </dl>
      </div>
       <button @click="handerAdd">加载更多</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineComponent } from 'vue';
import Header from '../components/header.vue'
import lazy from '../drieactive/lazy'
import {storeToRefs} from 'pinia'
import {useCounterStore} from '../stores/Myhome'
import {useRouter} from 'vue-router'
const userStore = useCounterStore()
const {ImageList} = storeToRefs(userStore)
const handerAdd = userStore.handerAdd
const router = useRouter()
const handerTemp=(id:number)=>{
    router.push(`/temp/${id}`)
}
</script>
<style lang="scss" scoped>
.container{
  width: 100vw;
  height: 100vh;
  position: absolute;
  left:0;
  top: 0;
  .main{
   width: 100%;
    .main-content{
      width: 20rem;
      display: flex;
      flex-wrap: wrap;
      margin-left: 10%;
        dl{
          width: 3rem;
          height: 8rem;
          margin:  0.5rem;
          position: relative;
          
          dt{
            width: 3rem;
            height: 4rem;
            overflow: hidden;
            img{
              width: 3rem;
              height: 4rem;
            }
    }
    dd{
      width: 3rem;
      height: 2rem;
      margin-left: 0;
      >div{
        margin-top: 1rem;
      }
    }
    .mask{
      width: 3rem;
      height: 4rem;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: 100;

      button{
        width: 2rem;
        height: 0.5rem;
        margin-top: 50%;
        margin-left: 12%;
        background: skyblue;
        color: #fff;
        border: none;

      }
    }
       }
       dl:hover img{
        transition:transform  0.3s ease;
        transform: scale(1.2);
    }

      dl:hover .mask{
        display: block;
        z-index: 101;
     }
    }
  }
}

</style>
